Web разработка

This media is not supported in your browser

VIEW IN TELEGRAM

Совет по CSS! 🤙

Вы можете создать этот магнитный эффект :hover с помощью позиционирования анкоров CSS, :has и без JS 🔥.

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}

Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay

ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}

www.tg-me.com/in/Web разработка/com.htmlcssjavas/943

925 viewsApr 13, 2024 at 08:17

Совет по CSS! 🤙

Вы можете создать этот магнитный эффект :hover с помощью позиционирования анкоров CSS, :has и без JS 🔥.

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}

Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay

ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}

BY Web разработка